@charset "utf-8";

/* 自定义字体 */
@font-face {
    font-family: 'myselfFont';
    src: url('fonts/aadurianpa.woff2') format('woff2'),
         url('fonts/aadurianpa.woff') format('woff'),
         url('fonts/aadurianpa.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,body {
	width: 100%;
	height: 100%;
    max-width: 640px;
    margin:0 auto;
    background-image: url('bg-image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
}
.resize {
	display: block;
}
.horizon {
	left: 50%;
	transform: translateX(-50%);
}
.SY-story img {
	height: auto !important;
}
.SY-story {
	width: 100%;
	height: 100%;
	margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.SY-story .font {
	font-family: 'myselfFont' !important;
    color: #fff;
}
.SY-story .SY-audio {
	right: 1rem;
	top: .8rem;
	width: 1.6rem;
	height: 1.6rem;
	background: url("play.png") no-repeat center;
	background-size: 100%;
	z-index: 99;
	cursor: pointer;
}
.playerRotate {
	-webkit-animation:playerRotate 3s linear infinite;
	-moz-animation:playerRotate 3s linear infinite;
	-ms-animation:playerRotate 3s linear infinite;
	animation:playerRotate 3s linear infinite;
}
@-webkit-keyframes playerRotate{
	from{-webkit-transform: rotate(0deg);}
	to{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes playerRotate{
	from{-moz-transform: rotate(0deg);}
	to{-moz-transform: rotate(360deg);}
}
@-ms-keyframes playerRotate{
	from{-ms-transform: rotate(0deg);}
	to{-ms-transform: rotate(360deg);}
}
@keyframes playerRotate{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}

.SY-story .storyList {
    width: 100%;
    height: 100%;
    z-index: 1;
}
.storyList > div {
	width: 100%;
	height: 100%;
}
.SY-story .storyList .main_story > div {
    height: 100%;
    float: left;
}
.SY-story .logo,#loading .logo {
	top: 10px;
    left: 10px;
    z-index: 99;
}
#loading .logo {
    z-index: 1000;
}
.SY-story .slogen,#loading .slogen {
	display: inline-block;
    vertical-align: top;
    font-size: .7rem;
    color: #fff;
    margin-top: .05rem;
    margin-left: .1rem;
}

/* loading */
#loading{
    height: 100%;
    width: 100%;
    position: fixed;
    margin-top: 0px;
    top: 0px;
    z-index: 999;
    background: #312f47;
}
#loading-center{
    width: 100%;
    height: 100%;
    position: relative;
}
#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 40%;
    height: 60px;
    width: 60px;
    margin-top: -30px;
    margin-left: -30px; 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); 
}
#loading .loadingText {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 200px;
    margin-left: -100px; 
    font-size: 16px;
    color: #fff;
}
.object{
    width: 10px;
    height: 10px;
    background-color: #FFF;
    position: absolute;
    left: 20px;
    top: 20px;
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
}
.object:nth-child(2n+0) {
    margin-right: 0px;
}
#object_one {
    -webkit-animation: object_one 2s infinite;
    animation: object_one 2s infinite;
    -webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; 
}
#object_two {
    -webkit-animation: object_two 2s infinite;
    animation: object_two 2s infinite;
    -webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; 
}
#object_three {
    -webkit-animation: object_three 2s infinite;
    animation: object_three 2s infinite;
    -webkit-animation-delay: 0.4s; 
    animation-delay: 0.4s; 
}
#object_four {
    -webkit-animation: object_four 2s infinite;
    animation: object_four 2s infinite;
    -webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}
#object_five {
    -webkit-animation: object_five 2s infinite;
    animation: object_five 2s infinite;
    -webkit-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
}
#object_six {
    -webkit-animation: object_six 2s infinite;
    animation: object_six 2s infinite;
    -webkit-animation-delay: 0.7s; 
    animation-delay: 0.7s; 
}
#object_seven {
    -webkit-animation: object_seven 2s infinite;
    animation: object_seven 2s infinite;
    -webkit-animation-delay: 0.8s; 
    animation-delay: 0.8s; 
}
#object_eight {
    -webkit-animation: object_eight 2s infinite;
    animation: object_eight 2s infinite;
     -webkit-animation-delay: 0.9s; 
    animation-delay: 0.9s; 
}
#object_big{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 15px;
    top: 15px;
    -webkit-animation: object_big 2s infinite;
    animation: object_big 2s infinite;
    -webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}   
@-webkit-keyframes object_big {
 50% { -webkit-transform: scale(0.5); }

}
@keyframes object_big {
 50% { 
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  } 
}
@-webkit-keyframes object_one {
 50% { -webkit-transform: translate(-25px,-25px)  ; }
}
@keyframes object_one {
 50% { 
    transform: translate(-25px,-25px) ;
    -webkit-transform: translate(-25px,-25px) ;
  } 
}
@-webkit-keyframes object_two {
  50% { -webkit-transform: translate(0,-25px) ; }
}
@keyframes object_two {
 50% { 
    transform: translate(0,-25px) ; 
    -webkit-transform: translate(0,-25px) ; 
  } 
}
@-webkit-keyframes object_three {
 50% { -webkit-transform: translate(25px,-25px) ; }
}
@keyframes object_three {
 50% { 
    transform: translate(25px,-25px) ;
    -webkit-transform: translate(25px,-25px) ;
  } 
}
@-webkit-keyframes object_four {
  50% { -webkit-transform: translate(25px,0) ; }
}
@keyframes object_four {
  50% { 
    transform: translate(25px,0) ;
    -webkit-transform: translate(25px,0) ;
  } 
}
@-webkit-keyframes object_five {
  50% { -webkit-transform: translate(25px,25px) ; }
}
@keyframes object_five {
  50% { 
    transform: translate(25px,25px) ;
    -webkit-transform: translate(25px,25px) ;
  } 
}
@-webkit-keyframes object_six {
  50% { -webkit-transform: translate(0,25px) ; }
}
@keyframes object_six {
  50% { 
    transform:  translate(0,25px) ;
    -webkit-transform:  translate(0,25px) ;
  } 
}
@-webkit-keyframes object_seven {
  50% { -webkit-transform: translate(-25px,25px) ; }
}
@keyframes object_seven {
  50% { 
    transform: translate(-25px,25px) ;
    -webkit-transform: translate(-25px,25px) ;
  } 
}
@-webkit-keyframes object_eight {
  50% { -webkit-transform: translate(-25px,0) ; }
}
@keyframes object_eight {
  50% { 
    transform: translate(-25px,0) ;
    -webkit-transform: translate(-25px,0) ;
  } 
}

/* section0 */
.section0 .main {
    color: #fff;
}
.section0 .text {
    font-size: .7rem;
}
.section0 .text span {
    color: #e83834;
    font-weight: 700;
}
.section0 .title {
    font-size: 1rem;
    font-weight: 700;
}
.section0 .title span {
    color: #e83834;
}
.section0 .subhead {
    font-size: .85rem;
}
.section0 .teacher {
    font-size: .7rem
}
.section0 .teacher span {
    font-size: .85rem;
    font-weight: 700;
}
.section0 .time {
    font-size: .7rem;
}
.section0 .price p {
    font-size: .7rem;
}
.section0 .oldPrice {
    color: #adadad;
}
.section0 .oldPrice span {
    margin-left: .2rem;
    text-decoration: line-through;
}
.section0 .newPrice {
    color: #e83834;
}
.section0 .newPrice span {
    font-weight: 700;
    font-size: .8rem;
    margin-left: .2rem;
}
.section0 .txt {
    font-size: .7rem;
}

/* section1 */
.storyList .section1 .titlePic {
	left: 47%;
	transform: translateX(-50%);
}
.storyList .choose1 {
    text-align: center;
	background: url("choose1.png") no-repeat center;
	background-size: 100% 100%;
}
.storyList .choose2 {
    text-align: center;
    background: url("choose2.png") no-repeat center;
    background-size: 100% 100%;
}
.storyList .nextBtn,.storyList .begin {
    text-align: center;
    background: url("btn.png") no-repeat center;
    background-size: 100% 100%;
}
.storyList .backBtn {
	text-align: center;
    background: url("btn1.png") no-repeat center;
    background-size: 100% 100%;
}
.storyList .choose1 span,.storyList .choose2 span {
    width: 88%;
    top: 50%;
    left:45%;
    transform: translate(-50%,-50%);
    font-size: .55rem;
    line-height: 1.2;
}
.storyList .nextBtn span,.storyList .begin span,.storyList .backBtn span {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: .8rem;
}
.storyList .section1 .soft-ps,
.storyList .section1 .soft-ai {
    -webkit-animation: moving 1.5s infinite alternate linear;
    -moz-animation: moving 1.5s infinite alternate linear;
    animation: moving 1.5s infinite alternate linear;
}
.storyList .section1 .cloud {
    -webkit-animation: scaling 1s infinite alternate linear;
    -moz-animation: scaling 1s infinite alternate linear;
    animation: scaling 1s infinite alternate linear;
}
.storyList .section1 .soft-m,
.storyList .section1 .soft-s {
    -webkit-animation: rotate 1.2s infinite alternate linear;
    -moz-animation: rotate 1.2s infinite alternate linear;
    animation: rotate 1.2s infinite alternate linear;
}

/* moving */
@-webkit-keyframes moving {
    from {
        transform:rotate(0deg) scale(1);
    }
    to {
        transform:rotate(-30deg) scale(1.05);
    }
}
@-moz-keyframes moving {
    from {
        transform:rotate(0deg) scale(1);
    }
    to {
        transform:rotate(-30deg) scale(1.05);
    }
}
@keyframes moving {
    from {
        transform:rotate(0deg) scale(1);
    }
    to {
        transform:rotate(-30deg) scale(1.05);
    }
}
/* rotate */
@-webkit-keyframes rotate {
    from {
        transform:rotate(0deg) scale(1);
    }
    to {
        transform:rotate(15deg) scale(1.05);
    }
}
@-moz-keyframes rotate {
    from {
        transform:rotate(0deg) scale(1);
    }
    to {
        transform:rotate(15deg) scale(1.05);
    }
}
@keyframes rotate {
    from {
        transform:rotate(0deg) scale(1);
    }
    to {
        transform:rotate(15deg) scale(1.05);
    }
}

/* scaling */
@-webkit-keyframes scaling {
    from {
        transform:scale(1);
    }
    to {
        transform: scale(1.05);
    }
}
@-moz-keyframes scaling {
    from {
        transform:scale(1);
    }
    to {
        transform:scale(1.05);
    }
}
@keyframes scaling {
    from {
        transform:scale(1);
    }
    to {
        transform:scale(1.05);
    }
}

/* section2 */
.storyList .section2 .storyTitle {
    font-size: .8rem;
    line-height: 1.3;
}

/* section9 */
.storyList .section9 .final {
    font-size: .8rem;
    line-height: 1.4;
}
.storyList .section9 .final .dots {
    font-size: 1rem;
    line-height: 1;
}

/* section10 */
.storyList .section10 .text {
	font-size: 1.2rem;
	color: rgb(238,42,42);
	line-height: 1.5;
}
.storyList .section10 .ending_text {
	padding:.3rem .6rem;
	font-size: .6rem;
	color: #fff;
	background:#2f2b3c;
}
.storyList .section10 .replayBtn,.storyList .section0 .replayBtn {
	font-size: .6rem;
	color: #fff;
	padding:.2rem;
	text-decoration: underline;
}

/* 分享提示 */
.shareTipDialog {
	right: 2rem;
    top: .5rem;
    z-index: 999999;
}
.shareTipDialog img {
	width:145px;
	height: 129px;
}

/* 领取代金券 */
.getCoupon .mui-popup-inner {
    height: 242px
}
.getCoupon .close {
    top: 8px;
    right: 15px;
    font-size: 14px;
    color: #666;
    z-index: 5;
}
.getCoupon .title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.getCoupon .content {
	margin-top: 10px;
    padding:0 3px;
}
.getCoupon .content .item,
.getCoupon .content .text {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}
.getCoupon .content .text {
    top: 90px;
    font-size: 12px;
}
.getCoupon .content img {
    display:block;
    width: 240px;
    height: 215px;
    z-index: 2;
    top: 0;
    left: 15px;
}

.mui-popup-backdrop {
    background: rgba(0,0,0,.6);
}
